<html xmlns="http://www.w3.org/1999/xhtml" xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk">

    <ui:composition template="#{contextPath}/layouts/default.xhtml">
        <ui:define name="title">#{text['timecardForm.title']}</ui:define>
        <ui:param name="menu" value="UserMenu"/>
        <ui:define name="resources">
            <script type="text/javascript" src="#{contextPath}/scripts/jquery.inputmask.js"></script>
            <script type="text/javascript" src="#{contextPath}/scripts/jquery.inputmask.extentions.js"></script>
            <script>
                window.onload = function() {
                    $(".time").inputmask('h:s t');
                };
            </script>
        </ui:define>

        <ui:define name="body">
            <c:set var="delObject" value="#{text['timecardForm.timecard']}"/>
            <script type="text/javascript">var msgDelConfirm =
                        "<h:outputFormat value="#{text['inactivate.confirm']}"><f:param value="#{delObject}" /></h:outputFormat>";</script>

            <div class="col-sm-2">
                <h2>#{text['timecardForm.heading']}</h2>
                <c:choose>
                    <c:when test="${param.from == 'list' or empty timecardForm.timecard.id}">
                        <h:outputText value="#{text['timecardForm.admin.message']}"/>
                    </c:when>
                    <c:otherwise><h:outputText value="#{text['timecardForm.message']}"/></c:otherwise>
                </c:choose>
            </div>
            <div class="col-sm-7">

                <h:form id="timetrackForm" styleClass="well">
                    <h:inputHidden value="#{timecardForm.timecard.id}" id="id"/>

                    <c:set var="addText" value="#{text['button.add']}"/>

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="users" value="#{text['timecard.user']}"/>
                        <!--h:inputText styleClass="form-control" value="#{timecardForm.timecard.user.fullName}" id="user" disabled="true"/-->
                        <h:selectOneMenu value="#{timecardForm.timecard.user}" id="users" disabled="#{timecardForm.operation != 'add'}"
                                         styleClass="form-control" style="height: 30px; padding: 0;">
                            <f:selectItem itemLabel=""/>
                            <t:selectItems value="#{timecardForm.users}" var="user" itemLabel="#{user.fullName}" itemValue="#{user}"/>
                            <f:converter converterId="objconverter"/>
                        </h:selectOneMenu>
                    </div>

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="date" value="#{text['timecard.date']}"/>
                        <h:inputText styleClass="form-control" value="#{timecardForm.timecard.date}" id="date" disabled="#{timecardForm.operation != 'add'}">
                            <f:convertDateTime pattern="dd/MM/yyyy"/>
                        </h:inputText>
                    </div>

                    <div class="row">
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="login" value="#{text['timecard.login']}"/>
                            <h:inputText styleClass="form-control time" id="login" value="#{timecardForm.loginTime}" maxlength="50" required="true">
                                <f:convertDateTime pattern="hh:mm a"/>
                            </h:inputText>
                            <p:message for="login"/>
                        </div>
                        <div class="col-sm-6 form-group">
                            <h:outputLabel styleClass="control-label" for="logout" value="#{text['timecard.logout']}"/>
                            <h:inputText styleClass="form-control time" value="#{timecardForm.logoutTime}" id="logout" maxlength="50">
                                <f:convertDateTime pattern="hh:mm a"/>
                            </h:inputText>
                            <p:message for="logout"/>
                        </div>
                    </div>

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="reason" value="#{text['timecard.reason']}"/>
                        <h:selectOneMenu value="#{timecardForm.timecard.reason}" id="reason" styleClass="form-control" style="height: 38px">
                            <f:selectItem itemLabel=""/>
                            <f:selectItem itemLabel="Receso Personal" itemValue="Receso Personal"/>
                            <f:selectItem itemLabel="Receso" itemValue="Receso"/>
                            <f:selectItem itemLabel="Almuerzo" itemValue="Almuerzo"/>
                            <f:selectItem itemLabel="Salida" itemValue="Salida"/>
                        </h:selectOneMenu>
                    </div>

                    <div class="form-group">
                        <h:outputLabel styleClass="control-label" for="totalHours" value="#{text['timecard.totalHours']}"/>
                        <h:inputText styleClass="form-control" value="#{timecardForm.timecard.totalHours}" id="totalHours" disabled="true"/>
                    </div>

                    <div class="form-group form-actions">
                        <h:commandButton value="#{text['button.save']}" action="#{timecardForm.save}" styleClass="btn btn-primary"/>

                    <!-- Todo: hide this button when the user's id is not assigned. Wrapping it with <c:if test="${not empty userForm.user.id}"> or
                         rendered="${not empty userForm.user.id}" causes this button to not call the delete() method in UserForm.  -->
                        <h:commandButton value="#{text['button.inactivate']}" action="#{timecardForm.inactivate}"
                                         styleClass="btn btn-default" onclick="return confirmMessage(msgDelConfirm)"/>

                        <h:commandButton value="#{text['button.cancel']}" action="#{timecardForm.cancel}" immediate="true"
                                         styleClass="btn btn-default"/>
                    </div>
                </h:form>
            </div>
        </ui:define>
    </ui:composition>
</html>
